<template>
  <div>
    <n-drawer v-model:show="showModal" :width="dialogWidth">
      <n-drawer-content title="订单中心详情" closable>
        <n-spin :show="loading" description="请稍候...">
          <n-descriptions label-placement="left" class="py-2" :column="1">
            <n-descriptions-item>
              <template #label>
                商品名称
              </template>
               {{ formValue.productName }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                商品图片
              </template>
              <n-avatar
                :src="formValue.productMainImage?formValue.productMainImage[0]:''"
                :style="fileAvatarCSS"
                shape="square"
                size="large"
                class="min-left-space"
              />
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                订单UUID
              </template>
              {{ formValue.uid }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                交易ID
              </template>
              {{ formValue.traceId }}
            </n-descriptions-item>
            <n-descriptions-item label="支付方式">
              <n-tag :type="dict.getType('payType', formValue.payMethod)" size="small" class="min-left-space">
                {{ dict.getLabel('payType', formValue.payMethod) }}
              </n-tag>
            </n-descriptions-item>
            <n-descriptions-item label="订单状态">
              <n-tag :type="dict.getType('orderStatus', formValue.status)" size="small" class="min-left-space">
                {{ dict.getLabel('orderStatus', formValue.status) }}
              </n-tag>
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                用户昵称
              </template>
              {{ formValue.adminMemberUsername }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                用户手机号
              </template>
              {{ formValue.adminMemberMobile }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                商家
              </template>
              {{ formValue.storeName }}
            </n-descriptions-item>
            <n-descriptions-item label="订单类型">
              <n-tag :type="dict.getType('orderType', formValue.orderType)" size="small" class="min-left-space">
                {{ dict.getLabel('orderType', formValue.orderType) }}
              </n-tag>
            </n-descriptions-item>
            <!-- <n-descriptions-item>
              <template #label>
                商品ID
              </template>
              {{ formValue.productId }}
            </n-descriptions-item> -->
            <n-descriptions-item>
              <template #label>
                购买数量
              </template>
              {{ formValue.qty }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                使用积分
              </template>
              {{ formValue.usePoints }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                使用金额(RMB)
              </template>
              {{ formValue.useAmount }}
            </n-descriptions-item>
            <n-descriptions-item label="物流公司">
              <n-tag :type="dict.getType('ExpressOptions', formValue.expressInfoExpressCompany)" size="small" class="min-left-space">
                {{ dict.getLabel('ExpressOptions', formValue.expressInfoExpressCompany) }}
              </n-tag>
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                快递单号
              </template>
              {{ formValue.expressInfoExpressNumber }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                付款时间
              </template>
              {{ formValue.payTime }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                订单确认时间
              </template>
              {{ formValue.confirmTime }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                结束时间
              </template>
              {{ formValue.endTime }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                归档时间
              </template>
              {{ formValue.archiveTime }}
            </n-descriptions-item>
          </n-descriptions>
        </n-spin>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { View } from '@/api/userOrder';
import { useDictStore } from '@/store/modules/dict';
import { adaModalWidth } from '@/utils/hotgo';
import { useMessage } from 'naive-ui';
import { computed, ref } from 'vue';
import { State, newState } from './model';

  const message = useMessage();
  const dict = useDictStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref(newState(null));
  const dialogWidth = computed(() => {
    return adaModalWidth(580);
  });
  const fileAvatarCSS = computed(() => {
    return {
      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
      '--n-font-size': `18px`,
    };
  });

  // 下载
  function download(url: string) {
    window.open(url);
  }

  // 打开模态框
  function openModal(state: State) {
    showModal.value = true;
    loading.value = true;
    View({ id: state.id })
      .then((res) => {
        formValue.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped></style>
